<template>
   <div class="yw-list-container" :style="{minHeight:bodyHeight + 'px'}">
      <van-nav-bar :title="$route.params.gameName" left-text="" class="icon-return" left-arrow @click-left="$router.back(-1)"></van-nav-bar>
      <van-row type="flex" justify="center" class="yw-list-nav">
          <van-col span="12"><span class="color-6" @click="pxPopup = !pxPopup">{{pxVal}}</span><i></i></van-col>
          <van-col span="12">
            <div @click="show = !show,clickSelect()">
              <span class="color-6">筛选</span><i></i>
            </div>
          </van-col>
      </van-row>
      <ul class="yw-list-product">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <li v-for="(item,index) in gameLists" :key="index" >          
              <div class="div-a" @click="detailLink(item.id)">             
                <img :src="$imgPath(item.headImg)" />
                <img class="img-bj" src="../../assets/image/index/img_btm.png" alt="">               
                <p class="fl city"><span class="font-24"><em v-if="item.onlineStatus == 0">在线</em> | {{item.city}}</span></p>
                <span class="fr grading">{{item.division}}</span>         
              </div>
              <div class="desc">
                <p class="text-align-l font-3 position-r margin-top">{{item.nickname}}
                  <em class="fr font-5 color-3">
                    <img class="age-icon" v-if="item.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                    <img class="age-icon" v-if="item.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                    <img class="age-icon" v-if="item.sex == 0" src="../../assets/image/icon_unknown.png" alt="">
                    {{item.age}}
                  </em>
                </p>           
                <!-- <p class="clearfix margin-bot">
                
                    <span class="fl color-default"><em class="font-yen font-34">{{item.price}}钻</em>/{{item.priceUnit}}</span>
                    <span class="fr">
                      <em class="yw-list-audio" @click="changeAudio(index)" v-if="item.audioUrl!=null">
                        <audio class="audio" :id="'audio'+index" :src="$imgPath(item.audioUrl)" controls="true"></audio>
                      </em> 
                           
                      <em class="yw-list-favorite1" v-if="item.collect==true" @click="dropAttention(index)"></em>                      
                      <em class="yw-list-favorite2" v-else @click="addAttention(index)"></em>                     
                    </span>
                </p> -->
              </div>         
            </li>
            <p class="arrayNull" v-if="nullData">暂无数据</p>    
          </van-list>   
      </ul>
      <!-- 智能排序弹窗 -->
      <van-popup v-model="pxPopup" position="top" :overlay="true">
        <ul class="px-box-ul clearfix">
          <li class="color-6" :class="[pxActive == index ? 'color-default' : '']" v-for="(item,index) in pxValue" :key="index" @click="pxType(index,item)">{{item}} 
            <i class="fr" v-if="pxActive == index"><img src="../../assets/image/center/icon_fit.png" alt=""></i>
          </li>
        </ul>
      </van-popup>
      <!-- 筛选弹框 -->
      <van-popup v-model="show" position="top" :overlay="isOverlay">
        <ul class="yw-list-shx clearfix">
          <p class="color-9">性别</p>
          <li v-for="(item,index) in sexList" :key="index" @click="sexIndex = index,sexId = index">
            <span :class="[index == sexIndex ? 'sexActive' : '']">{{item}}</span>
          </li>
        </ul>
        <ul class="yw-list-shx clearfix">
          <p class="color-9">段位</p>
          <li v-for="(item,index) in dwList" :key="index" @click="dwIndex = index,dwId = item.id">
            <span :class="[index == dwIndex ? 'dwActive' : '']">{{item.name}}</span>
          </li>
        </ul>
        <div class="bt clearfix">
          <van-button class="btn btn-default fl" @click="dwIndex=0,sexIndex=0,dwId='',show=false,sexId='',gameArr()">重置</van-button>
          <van-button class="btn btn-success fr" @click="show=false,page=0,gameArr()">确定</van-button>
        </div>
      </van-popup>
   </div>
</template>
<script>
import apiHttp from '../../api/index'
  import { Popup, Toast } from 'vant'
  export default {
  data() {
    return {
      show: false,
      isOverlay: false,
      bodyHeight:'',
      gameLists:[],
      audioUrlArr:[],
      sexList:['看全部','只看男','只看女'],
      sexIndex:0,
      sexId:'',
      page:-1,
      size:10,
      loading:false,
      finished:false,
      serviceId:this.$route.params.gameId,
      dwList:[],
      dwIndex:0,
      dwId:'',
      pxPopup:false,
      pxValue:['智能排序','人气最高','最新新人','价格最低','价格最高'],
      pxActive:0,
      pxVal:'智能排序',
      totalElements:-1,
      nullData:false 
    }
  },
  mounted(){
        this.bodyHeight = document.body.clientHeight
        this.getServiceInfo();   
  },
  methods: {
    onLoad(){
      if(this.gameLists.length == this.totalElements){
          this.finished = true
          this.loading = false
      }else{
        this.page++
        this.gameArr()
      }
    },
    // 排序选择
    pxType(index,item){
      this.pxActive = index
      this.pxVal = item
      this.pxPopup = !this.pxPopup
      this.page = -1
      this.gameArr()

    },
    clickSelect() {
      this.isOverlay = true;
    },
    //获取服务下的陪玩列表
    gameArr(){
      let zn = ''
      if(this.pxVal == '智能排序'){
        zn=''
      }else if(this.pxVal == '人气最高'){
        zn='userCredit,DESC'
      }else if(this.pxVal == '最新新人'){
        zn='qualityTime,DESC'
      }else if(this.pxVal == '价格最低'){
        zn='price,ASC'
      }else{
        zn='price,DESC'
      }
      if(this.sexId == 0){
        this.sexId = ''
      }
      let parmes = {
        page:this.page,
        size: this.size,
        sort:zn,
        serviceId:this.serviceId,
        sex:this.sexId,
        divisionIds:this.dwId,
      }
      apiHttp.apiIndex.listByServiceUser(parmes,resp=>{    
        if(resp.code == 200){
          let arr = []
          for(let i = 0; i < resp.data.content.length; i++){
            this.audioUrlArr.push(resp.data.content[i].audioUrl);
            if(resp.data.content[i].headImg==null || resp.data.content[i].headImg==''|| resp.data.content[i].headImg==undefined){
                resp.data.content[i].headImg = '/user/head/defaultHeadImage.png';
            }
            if(resp.data.content[i].nickname.length>8){
              resp.data.content[i].nickname = resp.data.content[i].nickname.slice(0,5)+'...';              
            }
            arr.push(resp.data.content[i])
          }
          this.loading = false
          this.gameLists = arr
          this.totalElements = resp.data.totalElements 
          if(this.gameLists.length==0){
              this.nullData = true;
          }             
        }else{
          Toast(resp.message)
        }
      })
    },
    // 筛选段位查询
    getServiceInfo(){
      let params = {
        serviceId:this.serviceId
      }
      apiHttp.apiIndex.getServiceInfo(params,resp=>{
        let all = {
          name:'全部'
        }
        if(resp.code == 200){
          for(let i = 0; i < resp.data.attributeFirst.length; i++){
            if(resp.data.attributeFirst[i].code == 'division'){
              this.dwList = resp.data.attributeFirst[i].attributeSecond
              this.dwList.splice(0,0,all)
            }
          }
        }else{
          //Toast(resp.message)
        }
      })
    },
    detailLink(id){
      this.$router.push({
        name:'detail',
        params:{
          serviceId:this.serviceId,
          userId:id
        }
      })
    },
    //取消关注
    dropAttention(index){
        let params = {
             objectId:this.gameLists[index].id 
        }
        apiHttp.apiCenter.dropAttention(this.gameLists[index].id,params,resp=>{       
                if(resp.code==200){ 
                  this.gameLists[index].collect = false;                                                     
                    Toast("取消关注");
                }else{
                   Toast(resp.message)
                }
        })
        
    },
    //添加关注
    addAttention(index){
        let params = {
            objectId:this.gameLists[index].id                    
        }
        apiHttp.apiCenter.addAttention(params,resp=>{
            if(resp.code==200){
                this.gameLists[index].collect = true;                          
                  Toast("关注成功");
            }else{
                  Toast(resp.message)
            }
        })
    },
    //切换语音
        changeAudio(index){
            for(let i in this.gameLists){         
              if(i == index){                                   
                    this.gameLists[i].audioUrl = `${this.audioUrlArr[i]}`;                                   
                    let audio = document.getElementById('audio'+index)
                    if(audio.paused){    
                      setTimeout(()=>{
                        audio.play() // 这个就是播放  
                      },200)                                                           
                    }else{
                      setTimeout(()=>{
                        audio.pause()  // 这个就是暂停
                      },200)                       
                    }                                                                                                            
              }else{
                //this.gameLists[i].audioUrl = ''; 
                 if(this.audioUrlArr[i]==null){
                    this.gameLists[i].audioUrl = null; 
                  }else{
                     this.gameLists[i].audioUrl = ''; 
                  }                   
              }
            }
            
        }
  }
};
</script>
<style scoped>
.bt {
    padding: 0.4rem;
    margin-top: 0.6rem;
}
.font-5{
  font-size: 0.5rem;
}
.yw-list-container{
  background-color: #f5f5f5;
}
.yw-list-shx {
    padding: 0.2rem 0.4rem;
}
.yw-list-shx li>span {
    text-align: center;
    background: #f6f6f6;
    padding: 0.2rem 0.8rem;
    border-radius: 0.5rem;
    color: #333;
    font-size: 0.44rem;
}
.yw-list-shx>p {
    padding: 0.4rem 0;
    display: inline-block;
    width: 100%;
    text-align: left;
}
.yw-list-shx li {
  width: 25%;
  display: flex;
  float: left;
  margin-bottom: 0.4rem;
}
.yw-list-nav {
  line-height: 1.6rem;
  background: #fff;
}
.yw-list-nav .van-col--12 {
  text-align: center;
}
.yw-list-nav i {
  display: inline-block;
  width: 0.48rem;height: 0.48rem;
  margin-left: 0.2rem;
  background: url('../../assets/image/icon_arrow_lower.png') no-repeat;
  background-size: cover;
}
.yw-list-product {
    width: 100%;
    display: inline-block;
    padding-left: 3%;
}
.yw-list-product li {
    width: 45.5%;
    margin: 0.4rem 3% 0 0;
    background: #fff;
    display: inline-block;
    border-radius: 0 0 0.2rem 0.2rem;
}
.yw-list-product .div-a {
  width: 100%;
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 5.6rem; 
  /* background-color: #000; */
}
.yw-list-product .div-a>span {
    position: absolute;
    z-index: 999;
    bottom: 0.4rem;
    right: 0.3rem;
    color: #fff;
}
.yw-list-product .div-a>span>img {
    max-width: 0.44rem;
    margin-right: 0.2rem;
    position: relative;  
}
.div-a .img-bj{
  float: left;
  position: absolute;
  bottom: 0;
  opacity: 0.6;
}
.yw-list-product img {
  max-width: 100%;
  border-radius: 0.2rem 0.2rem 0 0;
  /* -webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,0.5)); */
}
.yw-list-product .desc {
    padding: 0 0.2rem;
    /*border-radius: 0 0 0.1rem 0.1rem;*/
}
.yw-list-product .desc p {
  line-height: 0.9rem;
}
.yw-list-product .desc .b-r-de {
    margin-top: 0.16rem;
}
/* 语音背景图 */
.yw-list-product .yw-list-audio {
  width: 2rem;
  height: 0.7rem;
  display: inline-block;
  background: url('../../assets/image/index/icon_voice.png') no-repeat;
  background-size: cover;
  margin-top: 0.1rem;
 /*  float: left; */
  margin-right: .3rem;
}
.audio{
    width: 3rem;
    height: .76rem;
    opacity: 0;
    position: relative;
    right: 0.8rem;
    z-index: -1;
}
/* 关注背景图 (被关注红心)*/
.yw-list-product .yw-list-favorite1 {
    width: 0.72rem;
    height: 0.6rem;
    display: inline-block;
    float: right;
    background: url('../../assets/image/icon_follow_c.png') no-repeat;
    background-size: cover;
    margin-bottom: 0.2rem;
    z-index: 99;
    margin-top: .1rem;
}
/* 关注背景图 (未被关注空心)*/
.yw-list-product .yw-list-favorite2 {
    width: 0.72rem;
    height: 0.6rem;
    display: inline-block;
    float: right;
    background: url('../../assets/image/icons_favorite.png') no-repeat;
    background-size: cover;
    z-index: 99;
    margin-top: .1rem;
}
.sexActive{
  background-color: #d84e4d !important;
  color: #fff !important;
}
.dwActive{
  background-color: #d84e4d !important;
  color: #fff !important;
}
.city{
  color: #fff;
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  z-index: 99;
}
.margin-top{
  margin-top: 0.1rem;
  margin-bottom: 0.2rem;
}
.grading{
  padding: 0rem 0.25rem 0.05rem 0.25rem;
  background-color: #d84e4d;
  border-radius: 0.6rem;
  font-size: 0.44rem;
}
.age-icon{
  width: .6rem;
  margin-right: .2rem;
  position: absolute;
  right: 0.6rem;  
  top:0.15rem;
}
.margin-bot{
  margin-bottom: 0.3rem;
}
.px-box-ul{
  width: 100%;
}
.px-box-ul li{
  width: calc(100% - 1.2rem);
  height: 1.5rem;
  padding: 0 .6rem;
  border-bottom:solid 0.04rem #eee;
  line-height: 1.5rem;
}
.px-box-ul li i img{
  width: .5rem;
}
</style>